<template>
  <div class="zong1">
    <div class="toptitle">设备数据</div>
    <!-- 上侧一些选择器和输入框，按钮 -->
    <div class="topselect">
      <el-select v-model="place" class="m-2" placeholder="请选择设备位置" size="small">
        <el-option v-for="item in placelist" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="ifonline" class="m-2" placeholder="全部在线/离线状态" size="small">
        <el-option v-for="item in ifonlinelist" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-select v-model="alertzt" class="m-2" placeholder="全部警报状态" size="small">
        <el-option v-for="item in alertztlist" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-input v-model="devicename" class="m-2" placeholder="请输入设备名称" style="width:300px;" size="small">
      </el-input>
      <el-button type="primary" size="small" class="m-3" @click="exportExcel">下载</el-button>
      <!-- <el-button type="primary" size="small" class="m-3" @click="prints">打印</el-button> -->
    </div>
    <!-- 下边的表格 -->
    <el-table id="table" border :data="tableData"
      style="width: 97%;margin-left:23px; margin-top:20px;height:600px;background:#f5f7fa;" :header-cell-style="{
        'text-align': 'center',
        background: '#B4C7E7',
        color: '#333333',
        height: '50px',
      }" :cell-style="{
  'text-align': 'center',
  background: '#f5f8fb',
}">
      <el-table-column type="selection" width="75" />
      <el-table-column prop="problemDescription" label="设备名称" width="100" align="center" />
      <el-table-column prop="urgencyType" label="设备位置" width="100" align="center" />
      <!-- <el-button type="info" :icon="Message" circle /> -->
      <!-- <el-button type="danger" :icon="Delete" circle /> -->
      <el-table-column label="在线状态" width="100" align="center">
        <template #default="scope">
          <div class="rgz">
            <div v-if="scope.row.workOrderType == '1'" class="greeny"></div>
            <div v-if="scope.row.workOrderType == '0'" class="redy"></div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="a3" label="在线状态" width="80" align="center"/> -->
      <el-table-column prop="a4" label="警报状态" width="100" align="center">
        <template #default="scope">
          <div class="rgz">
            <div v-if="scope.row.influenceType == '1'">在线</div>
            <div v-if="scope.row.influenceType == '0'">离线</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实时数据" class="lie" align="center" width="1290">
        <template #default="scope">
          <!-- {{scope.row.realTimeDataList}} -->
          <el-table :data="scope.row.realTimeDataList" style="width: 100%;height:50px;font-weight: 200; "
            :header-row-style="{ height: '20px' }" :header-cell-style="{ background: '#cddaee', color: '#646363' }">
            <el-table-column prop="problemDescription" label="回风温度" width="90" align="center">
              <template #default='scope1'>
                {{ scope1.row.problemDescription }}
              </template>
            </el-table-column>
            <el-table-column prop="returnAirCO" label="回风CO2" width="90" align="center"></el-table-column>
            <el-table-column prop="indoorTemperatureThree" label="室内温度3" width="100" align="center">
            </el-table-column>
            <el-table-column prop="indoorTemperature" label="室内温度" width="100" align="center">
            </el-table-column>
            <el-table-column prop="returnFanFrequency" label="回风机频率" width="100" align="center">
            </el-table-column>
            <el-table-column prop="blowerFrequency" label="送风机频率" width="100" align="center">
            </el-table-column>
            <el-table-column prop="waterValve" label="水阀" width="90" align="center"></el-table-column>
            <el-table-column prop="runner" label="转轮" width="90" align="center"></el-table-column>
            <el-table-column prop="outsideAirDamper" label="新风阀" width="90" align="center"></el-table-column>
            <el-table-column prop="bypassValve" label="旁通阀" width="90" align="center"></el-table-column>
            <el-table-column prop="exhaustTemperature" label="排风温度" width="90" align="center">
            </el-table-column>
            <el-table-column prop="theAirTemperature" label="新风温度" width="90" align="center">
            </el-table-column>
            <el-table-column prop="returnAirTemperature" label="回风温度" width="90" align="center">
            </el-table-column>
            <el-table-column prop="supplyAirTemperature" label="送风温度" width="90" align="center">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]"
        :small=true layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
import { getDeviceList } from '@/api/model/echarts'
import { ref, watch, onMounted } from 'vue'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx/dist/xlsx.mini.min.js'
export default {
  setup() {
    const currentPage = ref(5)
    const pageSize = ref(100)
    const getdata = async () => {
      let res = await getDeviceList()
      tableData.value = res.data
    }
    onMounted(() => {
      getdata()
    })
    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`)
    }

    function exportExcel() {
      //需给表格定义一个id或者类名
      console.log('1111111111', XLSX);
      let wb = XLSX.utils.table_to_book(document.querySelector('#table'));
      console.log('222');
      let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '111.xlsx');  //***是自己导出文件时的命名，随意
      } catch (e) {
        if (typeof console !== 'undefined')
          console.log(e, wbout)
      }
      return wbout
    }
    var tableData = ref([
      {
        a1: '12313',
        a2: 'Tom',
        a3: '0',
        a4: '0',
        lists: [1, 23, 43, 123, 22, 3, 3, 5, 6, 7, 19, 8, 99, 5]
      },
      {
        a1: '333333',
        a2: 'Tom',
        a3: '0',
        a4: '0',
        lists: [1, 23, 43, 123, 22, 3, 3, 5, 6, 7, 19, 8, 99, 5]
      },
      {
        a1: '2222222',
        a2: 'Tom',
        a3: '1',
        a4: '1',
        lists: [1, 23, 43, 123, 22, 3, 3, 5, 6, 7, 19, 8, 99, 5]
      },
      {
        a1: '44444',
        a2: 'Tom',
        a3: '1',
        a4: '1',
        lists: [1, 23, 43, 123, 22, 3, 3, 5, 6, 7, 19, 8, 99, 5]
      },
    ])
    var place = ref('')
    const placelist = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ]
    var ifonline = ref('')
    const ifonlinelist = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ]
    var alertzt = ref('')
    const alertztlist = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
      {
        value: 'Option4',
        label: 'Option4',
      },
      {
        value: 'Option5',
        label: 'Option5',
      },
    ]
    var devicename = ref('')
    watch(place, (newValue) => {
      alert(newValue)
    })
    watch(ifonline, (newValue) => {
      alert(newValue)
    })
    watch(alertzt, (newValue) => {
      alert(newValue)
    })
    watch(devicename, (newValue) => {
      alert(newValue)
    })
    function down() {
      alert('下载')
    }
    function prints() {
      alert('打印')
    }
    return {
      tableData, place, ifonline, alertzt, devicename, placelist, ifonlinelist, alertztlist, down, prints, currentPage, pageSize
      , handleSizeChange, handleCurrentChange,exportExcel
    }
  }
}
</script>
<style  >
.zong1 {
  width: 100%;
  height: 550px;
  background: white;
}

.lie {
  background: red;
}

.el-table__cell {
  padding: 0 !important;
}

.topselect {
  margin-top: 10px;
  padding-left: 850px;
}

.el-table .cell {
  padding: 0;
}

.m-2 {
  margin-left: 20px;
  width: 150px;
}

.m-3 {
  width: 80px;
  margin-left: 15px;
  /* background: #8faadc; */
}

.toptitle {
  padding-left: 30px;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 600;
  color: #4d62a5;
  border-bottom: 2px solid #d9deec;
  padding-bottom: 10px;
}

.el-table .el-table__cell {
  background: #f5f7fa;
}

.demo-pagination-block {
  float: right;
  margin-right: 20px;
  margin-top: 8px;
}

.redy {
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  background: red;
  margin-left: 40px;
}

.greeny {
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  background: #0db459;
  margin-left: 40px;
}

.rgz {
  text-align: center;
}
</style>